<template>
  <a-modal
    v-model:visible="modalVisible"
    :width="1000"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 选择产品</template>
    <div class="content">
      <div class="table-item">
        <a-table
          :data="getTableData"
          :pagination="false"
          :row-selection="rowSelection"
          v-model:selectedKeys="selectedKeys"
          row-key="id"
          @select="onSelect"
          @select-all="onSelectAll"
        >
          <template #columns>
            <a-table-column
              title="物料编码"
              :width="100"
              data-index="number"
              align="center"
            />
            <a-table-column
              title="物料名称"
              :width="100"
              data-index="name"
              align="center"
            />
            <a-table-column
              title="基本计量单位"
              :width="100"
              data-index="basicName"
              align="center"
            />
            <a-table-column
              title="需求数量"
              :width="100"
              data-index="amount"
              align="center"
            />
          </template>
        </a-table>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { computed, ref, watchEffect } from 'vue';
  import { GetRouters } from '@/api/menu';
  import {
    GetLocationAll,
    postLocation,
  } from '@/api/inventory-management/warehouse-management/location-list/index';
  import { cloneDeep } from 'lodash';

  const rowSelection = {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  };

  const props = withDefaults(
    defineProps<{
      visible: boolean;
      detailData: any;
    }>(),
    {
      visible: false,
    }
  );

  const selectedKeys = ref();
  const emit = defineEmits(['update:visible', 'selectDetailEmit']);
  const getTableData = ref();
  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  // 选择数据事件
  const selectedList = ref([]);
  const onSelect = (rowKeys: any, rowKey: any, record: any) => {
    const index = selectedList.value.findIndex((item: any) => {
      return item.id === rowKey;
    });
    if (index === -1) {
      selectedList.value.push(record);
    } else {
      selectedList.value.splice(index, 1);
    }
  };

  // 全选按钮
  const onSelectAll = (checked: boolean) => {
    if (checked) {
      selectedList.value = cloneDeep(getTableData.value);
    } else {
      selectedList.value = [];
    }
  };

  const getData = () => {
    getTableData.value = props.detailData;
  };
  getData();
  // 确定
  const handleOk = async () => {
    emit('selectDetailEmit', selectedList.value);
    modalVisible.value = false;
  };
  watchEffect(() => {
    if (modalVisible.value) {
      selectedList.value = [];
      selectedKeys.value = [];
    }
  });
</script>

<style scoped lang="less">
  .content {
  }
</style>
